<template>
	<view class="content">
		<view class="headerBar">
			
			<div ref="loginedBox" class="loginedBox" v-if="!isLogin">
				<u-row :gutter="10">
					<u-col span="3" justify="end"><u-avatar :src="avatarSrc" @click="toLoginPage" size="72"></u-avatar></u-col>
					<u-col span="9" align="start"><text class="loginTip">点击图标登录</text></u-col>
				</u-row>
			</div>
			
			<div ref="unloginedBox" class="loginedBox" v-if="isLogin">
				<u-row :gutter="10">
					<u-col span="3" justify="end"><u-avatar :src="logined" size="72"></u-avatar></u-col>
					<u-col span="9" align="start"><text class="loginTip">欢迎你,{{nickName}}</text></u-col>
				</u-row>
				
			</div>
		</view>
		
		<view class="litteFunction">
			 <u-grid
			 
					col="2"
					:border="true"
					customStyle="padding-top:16px"
			>
			
						<u-grid-item 
							@click="goToRegist"
						>
							<u-icon
							      name="man-add" 
							     :size="48"
								 color="rgb(100,155,155)"
								
							></u-icon>
							<text class="grid-text" >注册</text>
						</u-grid-item>
			            <u-grid-item  
						  @click="goToSettings"
			            >
			                <u-icon
			                      name="setting" 
			                     :size="48"
								 color="rgb(228,120,34)"
								
			                ></u-icon>
			                <text class="grid-text" >设置</text>
			            </u-grid-item>
						<u-grid-item
						       @click="goToNotice"
						>
						    <u-icon
						          name="chat" 
						         :size="48"
								 color="#284363"
								 
						    ></u-icon>
						    <text class="grid-text" >通知公告</text>
						</u-grid-item>
						
						
			        </u-grid>
		</view>
		
	</view>
</template>

<script>
	import {handleLoginStorage,readLoginStorage,clearLogin, getToken,logout} from '@/api/auth.js'
	export default{
		data() {
					return{
						isLogin:false,
						logined:'/static/logined.jpg',
						phoneLoginForm:{},
						nickName:undefined
					}
				},
		onReady() {
			let storeInToken=this.$store.getters.getToken;
			if(!storeInToken){
				let tokenInStorage=uni.getStorageSync("token");
				if(tokenInStorage){
					this.$store.commit("setToken",tokenInStorage);
				}
			}
			this.nickName=uni.getStorageSync("userNickName");
			this.initIsLogin();
		 },
		 computed:{
			 getToken(){
				 return this.$store.getters.getToken;
			 }
		 },
		 methods:{
			 
				 goToRegist(){
					uni.navigateTo({
						url:'/pages/regist/Regist'
					})
				 },
				goToSettings(){
					uni.navigateTo({
						url:"/pages/settings/Settings"
					})
				},
				
				 initIsLogin(){
					 
					 let token=this.$store.getters.getToken;
					 if(!token){
						 this.isLogin=false;
					 }else{
						 this.isLogin=true;
					 }
				 },
				 
				 getPhoneNumber(e){
					 uni.showLoading({
					 	mask: true,
					 	title: '加载中'
					 });
					 if (e.detail.encryptedData) {
						this.phoneLoginForm.encryptedData=e.detail.encryptedData;
						this.phoneLoginForm.iv = e.detail.iv;
						this.loginByPhone();
					 }else{
						 uni.hideLoading();
					 }
					 
				 },
				 loginByPhone(){
					 let that=this;
					 uni.login({
						 provider: 'weixin',
						 success: (res) => {
						 	if (res.code) {
						 		that.phoneLoginForm.code = this.$u.trim(res.code);
						 	} else {
						 		console.log('登录失败！' + res.errMsg)
						 		uni.hideLoading();
						 	}
						 }
					 });
				 },
				 setUserInfo(){
					 let funcCodeObject={"funcCodeList":["MY","YOUR","HIM"]}
					 let wxAuthRes={
						 "userId":1,
						 "userNickName":"张三",
						 "userPhone":"13278971399",
						 "loginToken":"xxsss23322222",
						 "authPrivilDto":funcCodeObject
					 }
				 	handleLoginStorage(wxAuthRes);
					this.isLogin=true;
				 },
				 readUserInfo(){
				 	let wxAuthRes=readLoginStorage();
					console.log(wxAuthRes);
				 },
				 toLoginPage(){
					 uni.navigateTo({
					 	url:"/pages/login/Login"
					 })
				 },
				 goToNotice(){
					 uni.navigateTo({
					 	url:"/pages/notice/Notice"
					 })
				 }
			 },
			
				
			watch:{
				getToken(newVal,oldVal){
					
					let tokenInStore=this.$store.getters.getToken;
					if(!tokenInStore){
						this.isLogin=false;
					}else{
						this.isLogin=true;
					}
				}
			}
		
		 }
	
</script>

<style scoped>
	.headerBar{
		height: 108px;
		background-color: rgb(60,152,255);
	}
	.loginedBox{
		padding-top: 24px;
		padding-left: 25px;
	}
	.loginTip{
		font-size: 13px;
		color: #fff;
	}
	.litteFunction{
		
		background-color: rgb(252, 252, 252);
	}
</style>